<div ng-cloak>
    <div class="col-md-4">
        <span class="hipster img-responsive img-rounded"></span>
    </div>
    <div class="col-md-8">
        <h1 translate="home.title">Welcome, Java Hipster!</h1>
        <p class="lead" translate="home.subtitle">This is your homepage</p>

        <div ng-switch="vm.isAuthenticated()">
            <div class="alert alert-success" ng-switch-when="true" translate="home.logged.message"
                 translate-values="{username: '{{vm.account.login}}'}">
                You are logged in as user "{{vm.account.login}}".
            </div>

            <div class="alert alert-warning" ng-switch-when="false" translate="global.messages.info.authenticated"
                 translate-compile>
                If you want to <a class="alert-link" href="" ng-click="vm.login()">sign in</a>, you can try the default
                accounts:<br/>- Administrator (login="admin" and password="admin") <br/>- User (login="user" and
                password="user").
            </div>

            <div class="alert alert-warning" ng-switch-when="false" translate="global.messages.info.register"
                 translate-compile>
                You don't have an account yet? <a class="alert-link" ui-sref="register">Register a new account</a>
            </div>
        </div>

        <p translate="home.question">
            If you have any question on JHipster:
        </p>

        <ul>
            <li><a href="http://jhipster.github.io/" target="_blank" translate="home.link.homepage">JHipster
                homepage</a></li>
            <li><a href="http://stackoverflow.com/tags/jhipster/info" target="_blank"
                   translate="home.link.stackoverflow">JHipster on Stack Overflow</a></li>
            <li><a href="https://github.com/jhipster/generator-jhipster/issues?state=open" target="_blank"
                   translate="home.link.bugtracker">JHipster bug tracker</a></li>
            <li><a href="https://gitter.im/jhipster/generator-jhipster" target="_blank" translate="home.link.chat">JHipster
                public chat room</a></li>
            <li><a href="https://twitter.com/java_hipster" target="_blank" translate="home.link.follow">follow
                @java_hipster on Twitter</a></li>
        </ul>

        <p>
            <span translate="home.like">If you like JHipster, don't forget to give us a star on </span>&nbsp;<a
            href="https://github.com/jhipster/generator-jhipster" target="_blank" translate="home.github">Github</a>!
        </p>
    </div>
</div>
